/**
 * 项目中可复用的数据和逻辑方法
 */

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

/**
 *
 * @param {*} apiCallBack 页面中请求的方法 => 回调函数
 */
export function UseObserve (apiCallBack) {
  // 监控根元素HomePAnnel组件是否进入可视区域
  // 1.获取监控元素
  const target = ref(null)
  // 2.执行监控
  /**
   * 1.useIntersectionObserver函数的返回值是个对象，对象中的stop方法可以停止监控
   * 2.useIntersectionObserver(
   *  target：监控的dom对象或组件实例
   *  callback:被监控的对象进入可视区域执行回调函数
   *  options?:配置监控行为 => ?是ts语法，非毕传
   * )
   *
   * 需求：当前组件进入可视区，发请求获取数据
   * 根据useIntersectionObserver监控函数的回调中的isIntersecting判断实现
   */
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 参数1是个数组：结构出数组中对象的isIntersecting的值 => 用来判断元素是否进入可视区域
      // isIntersecting返回布尔值，重复监视
      // console.log(isIntersecting ? '进入可视区' : '离开可视区')
      if (isIntersecting) {
        apiCallBack()
        // 发完停止监控
        stop()
      }
    },
    {
      // 说明这是一个区间0~~1区间 =》默认大于0 =》 如果想立马出现。将值设为0
      threshold: 0
    }
  )
  // 返回监控元素数据变量
  return { target }
}
